﻿<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />

		<style type="text/css">
			* {
				margin: 0;
				padding: 0
			}
			
			html,
			body {
				height: 100%;
				width: 100%
			}
			
			#top {
				height: 30px;
				width:100%;
				background: #eda;
				line-height: 30px;
				position: absolute;
				z-index: 1;
			}
			
			#top a {
				font-size: 12px;
				color: #333333;
				position: absolute;
				right: 100px;
			}
			
			#top span {
				font-size: 12px;
				color: #333333;
				position: absolute;
				right: 130px;
			}
			
			#box {
				width: 300px;
				height: 200px;
				margin: 100px auto;
				border: 2px solid #DDAADD;
				position: absolute;
				left:500px;
				z-index: 3;
				display: none;
			}
			
			#title {
				height: 40px;
				background: #EEDDAA;
				line-height: 40px;
				position: relative;
				color: #fff;
			}
			
			#title span {
				font-size: 20px;
				position: absolute;
				right: 10px;
			}
			
			#center {
				height: 160px;
				padding-left: 30px;
				background: #fff;
			}
			
			#center input {
				margin: 5px;
				width: 80px;
				outline: none;
			}
			
			.error {
				color: darkred;
				font-size: 12px;
			}
			
			#close {
				cursor: pointer;
			}
			
			#big {
				width: 100%;
				height: 100%;
				background: #333333;
				opacity: 0.5;
				display: none;
				position: absolute;
				z-index: 2;
			}
			#title1{height:40px;background: pink;}
			#center1{height:160px;background: #8B0000;}
			#img{width:20px;height:20px;}
			#_i{color:darkred;font-style:normal;font-size:30px}
		</style>
		<script src="js/commonstyle.js"></script>
		<script>
			window.onload = function() {
				var _top = document.getElementById("top");
				var _box = document.getElementById("box");
				var inputList = document.getElementById("center").getElementsByTagName("input");
				var _error = document.getElementsByClassName("error");
				var _close = document.getElementById("close");
				var userName = document.getElementById("userName");
				var enter = document.getElementById("enter");
				var out = document.getElementById("out");
				var title = document.getElementById("title");
				var big = document.getElementById("big");
				_top.onclick = function() { //点击登录 登录框出现
					console.log("a");
					big.style.display = "block"
					_error[0].innerText = "";
					_error[1].innerText = "";
					if(!inputList[2].checked) {
						inputList[0].value = "";
						inputList[1].value = "";
					} else {
						inputList[0].value = getCookie("username");
						inputList[1].value = "";
					}

					_box.style.display = "block";
				}
				_close.onclick = function() { //点击×关闭登录框
					_box.style.display = "none";
					big.style.display = "none"
				}
				var check = false;
				for(var i = 0; i < 2; i++) { //判断用户名跟密码是否为16位
					inputList[i].index = i;
					inputList[i].onblur = function() {
						if(!/^.{6,12}$/.test(this.value)) {
							_error[this.index].style.display = "inline-block";
							_error[this.index].innerHTML = "位数在6-12位之间";
							check = false;
						} else {
							check = true;
							_error[this.index].innerHTML = "√";
						}
					}
				}
				inputList[2].onclick = function() { //单击子窗口的登录按钮
						_box.style.display = "none";
						enter.style.display = "none";
						out.style.display = "inline-block";
						big.style.display = "none";
						out.onclick = function(e) { //单击注销
							var e = e || event;
							e.stopPropagation ? e.stopPropagation() : e.cancleBubble = true;
							userName.innerHTML = "您好,点击登陆";
							out.style.display = "none";
							enter.style.display = "inline-block";
						}
				}
				inputList[3].onclick = function() { //单击退出
					_box.style.display = "none";
					big.style.display = "none"
				}
				title.onmousedown = function(e) { //鼠标按下标题栏可以被拖动
					var e = e || event;
					var mousex = e.clientX - getLocation(title).X;
					var mousey = e.clientY - getLocation(title).Y;
					document.onmousemove = function(e) {
						var e = e || event;
						_box.style.margin = "0";
						_box.style.position = "absolute";
						_box.style.left = e.clientX - mousex + "px";
						_box.style.top = e.clientY - mousey + "px";
						if(_box.offsetLeft<=0){//判断左边界
							_box.style.left = "0";
						}
						if(_box.offsetTop<=0){//判断上边界
							_box.style.top = "0";
						}
						var Width = document.documentElement.offsetWidth;//获取页面的宽度
						var widWidth = Width - _box.offsetWidth;//获取box的宽度
						var Height = document.documentElement.offsetHeight;
						var widHeight = Height - _box.offsetHeight;
						if(_box.offsetLeft>=widWidth){//判断右边界
							_box.style.left = widWidth + "px";
						}
						if(_box.offsetTop>=widHeight){//判断下边界
							_box.style.top = widHeight + "px";
						}
					}
					document.onmouseup = function() {
						document.onmousemove = "";
					}
				}
				big.onclick = function(){//当登录框出现，单击背景图案的时候
					alert("请完成当前操作");
				}
				var img =document.getElementById("img");
				document.onmousemove = function(e){
					var e = e || event;
					img.style.left = e.clientX + 10 +"px";
					img.style.top = e.clientY + 10 + "px";
				}
				
			}
		</script>
	</head>

	<body>

		<div id="top"><span id="userName">您好,点击登陆</span>
			<a href="#" id="enter">登录</a>
			<a href="#" id="out" style="display: none;">注销</a>
		</div>
		<div id="box">
			<span id="title1"><div id="title">标题栏<span id="close">×</span></div></span>
			<span id="center1"><div id="center">
				用户名：<input type="text" style="margin-top:20px;" /><span class="error">位数在6-12位之间</span><br/> 密码：
				<input type="text" /><span class="error">位数在6-12位之间</span><br/> 自动登录
				<input type="button" value="登录">
				<input type="button" value="退出">
			</div></span>
		</div>
		<div id="big"></div>
		<span style="position:absolute;right:107px;top:35px;font-size:15px">
			请点击登录按钮 <i id="_i">☝</i>
		</span>
		<div><input type="text" style="margin:200px;margin-right:0;outline:none"/>百度一下你知道</div>
		<img src="images/gif2.gif" style="position: absolute;top:0;left:0;z-index:4" id="img"/>
	</body>

</html>